<template>
  <div class="about">
    <el-row  style="height: 100%;">
      <el-col :span="6">
        <div class="grid-content" ref="counterRef">
          <img class="icon" src="../../../../assets/icon/camera.png" alt="" srcset="">
          <div class="right">
            <h1> <CountTo v-if="isVisible" :start-val="0" :end-val="89" separator="" :duration="3000" />+</h1>
            <p>相机器材</p>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <img class="icon" src="../../../../assets/icon/grapher.png" alt="" srcset="">
          <div class="right">
            <h1><CountTo v-if="isVisible" :start-val="0" :end-val="99" separator="" :duration="3000" />+</h1>
            <p>资深摄影师</p>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <img class="icon" src="../../../../assets/icon/yun.png" alt="" srcset="">
          <div class="right">
            <h1><CountTo v-if="isVisible" :start-val="0" :end-val="59" separator="" :duration="3000" />+</h1>
            <p>智能服务设备</p>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <img class="icon" src="../../../../assets/icon/line.png" alt="" srcset="">
          <div class="right">
            <h1><CountTo v-if="isVisible" :start-val="0" :end-val="49" separator="" :duration="3000" />+</h1>
            <p>隐私保护系统</p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { CountTo } from 'vue3-count-to'
import { ref, onMounted } from 'vue'

const counterRef = ref(null)
const isVisible = ref(false)

onMounted(() => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        isVisible.value = true
        observer.unobserve(entry.target)
      }
    })
  }, {
    threshold: 0.5
  })

  if (counterRef.value) {
    observer.observe(counterRef.value)
  }
})
</script>

<style scoped>
h1{
  margin: 0;
  font-size: 4em;
}
p{
  margin: 0;
  color: #3d3d3d;
  font-weight: bold;
  font-size: 1.2em;
}
.about {
  width: 100%;
height: 200px;
  margin-bottom: 0px;
  background: #fafafa;
}
.el-col{
  height: 100%;
}
.grid-content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon{
  height: 70px;
}
.right{
  margin-left: 20px;
}
:deep(.el-divider__text) {
  background-color: #fafafa;
}
</style>